<template>
  <div class="employee-update">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>员工信息更新</span>
        </div>
      </template>
      <el-form :model="supervisor" label-width="120px">
        <el-form-item label="电话号码">
          <el-input v-model="supervisor.telId" disabled></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="supervisor.password"></el-input>
        </el-form-item>
        <el-form-item label="真实姓名">
          <el-input v-model="supervisor.realName"></el-input>
        </el-form-item>
        <el-form-item label="生日">
          <el-date-picker
              v-model="supervisor.birthday"
              type="date"
              placeholder="选择日期"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="性别">
          <el-radio-group v-model="supervisor.sex">
            <el-radio :label="1">男</el-radio>
            <el-radio :label="0">女</el-radio>
          </el-radio-group>
        </el-form-item>

      </el-form>
      <div class="button-group">
        <el-button type="primary" @click="goBack">返回</el-button>
        <el-button type="success" @click="confirmUpdate">确认</el-button>
      </div>
    </el-card>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import axios from 'axios';
import { ElMessage } from 'element-plus';

const router = useRouter();
const route = useRoute();

// 定义员工信息的响应式对象
const supervisor = ref({
  telId: '',
  password: '',
  realName: '',
  birthday: '',
  sex: null,
  remarks: ''
});

// 获取 URL 中的 telId 参数
onMounted(() => {
  const telId = route.query.telId;
  if (telId) {
    supervisor.value.telId = telId;
    fetchSupervisorInfo(telId);
  }
});

// 根据 telId 获取员工信息
const fetchSupervisorInfo = async (telId) => {
  try {
    const response = await axios.get(`supervisor/getById/${telId}`);
    supervisor.value = response.data;
  } catch (error) {
    console.error("获取员工信息失败:", error);
    ElMessage.error("获取员工信息失败，请稍后重试！");
  }
};

// 返回按钮的逻辑
const goBack = () => {
  router.go(-1);
};

// 确认按钮的逻辑
const confirmUpdate = () => {
  const requestData = {
    telId: supervisor.value.telId,
    password: supervisor.value.password,
    realName: supervisor.value.realName,
    birthday: supervisor.value.birthday,
    sex: supervisor.value.sex,
    remarks: supervisor.value.remarks
  };

  axios.post("/supervisor/update", requestData)
      .then((response) => {
        console.log("更新成功:", response.data);
        ElMessage.success("员工信息已成功更新！");
        router.go(-1);
      })
      .catch((error) => {
        console.error("更新失败:", error);
        ElMessage.error("员工信息更新失败，请稍后重试！");
      });
};
</script>
<style scoped>
.employee-update {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.button-group {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
</style>